<template>
  <div class="productList w100p h100p">
    <van-search v-model="value" show-action placeholder="请输入品牌名称" @search="onSearch" @cancel="onCancel" />
    <div class="flb bgWH headerTitle">
      <div class="total l20">
        <span>共</span>
        <span class="cYE mr2 ml2 f16">{{ productBrandList.length }}</span>
        <span>个品牌</span>
      </div>
      <div class="cYE f14 l20" @click="showBrandPopup({}, 'add')">+添加品牌</div>
    </div>
    <div class="content">
      <div class="contentBox">
        <div v-for="(item, idx) in productBrandList" :key="idx" class="contentItem">
          <van-swipe-cell>
            <van-cell is-link :clickable="true" @click="brandJumpClick(item)">
              <template #title>
                <div @click.stop="showBrandPopup(item, 'update')">{{ item.productBrandName }}</div>
              </template>
            </van-cell>
            <template #right>
              <van-button square type="danger" text="删除" class="h100p" @click.stop="delBrandInfo(item.id)" />
            </template>
          </van-swipe-cell>
        </div>
      </div>
    </div>
    <van-popup v-model="showBrand" round position="bottom">
      <van-form class="content oyauto w100p" @submit="updateBrandInfo">
        <div class="flc mt10">
          <van-cell-group inset>
            <van-field v-model="brandInfo.productBrandName" name="品牌名称" label="品牌名称" placeholder="品牌名称" :rules="[{ required: true, message: '请填写品牌名称' }]" />
          </van-cell-group>
        </div>
        <div style="margin: 16px;">
          <van-button color="#409eff" round block type="primary" native-type="submit">{{ brandStatus === 'add' ? '添加' : '更新' }}</van-button>
        </div>
      </van-form>
    </van-popup>
  </div>
</template>
<script>
import pinyin from 'js-pinyin';
import { getAllProductBrand, addProductBrand, updateProductBrand, deleteProductBrand, getAllProductBrandArticleNoByProductBrandId } from '../utils/api';
export default {
  data() {
    return {
      value: '',
      longTouch: false,
      activeProduct: [],
      productBrandList: [],
      productBrandListOrg: [],
      goodsList: [],
      showBrand: false,
      brandInfo: {},
      brandStatus: 'add',
      showGoods: false,
      goodsStatus: 'add',
      goodsInfo: {}
    };
  },
  mounted() {
    this.getProductBrandList();
  },
  onShow() {
    this.productBrandList = this.productBrandListOrg;
  },
  methods: {
    getPingyin(name) {
      return pinyin.getCamelChars(name);
    },
    onSearch() {
      this.productBrandList = this.productBrandListOrg.filter(item => item.productBrandName.indexOf(this.value) !== -1);
    },
    onCancel() {
      this.productBrandList = this.productBrandListOrg;
    },
    // 弹框-增/改
    showBrandPopup(item, type) {
      this.brandInfo = JSON.parse(JSON.stringify(item));
      this.brandStatus = type;
      this.showBrand = true;
    },
    //增/改
    async updateBrandInfo() {
      this.showBrand = false;
      if (this.brandStatus === 'add') {
        await addProductBrand({ ...this.brandInfo });
        this.$toast.success('品牌信息添加成功！');
      } else {
        await updateProductBrand({ ...this.brandInfo });
        this.$toast.success('品牌信息更新成功！');
      }
      this.getProductBrandList();
    },
    //删
    async delBrandInfo(id) {
      await this.$async.confirm({ message: '确认要删除品牌信息吗？' });
      await deleteProductBrand({ id });
      this.$toast.success('品牌信息删除成功！');
      this.getProductBrandList();
    },
    async productChange(item) {
      let res = await getAllProductBrandArticleNoByProductBrandId({ productBrandId: item.id });
      this.goodsList = res.data;
    },
    //查
    async getProductBrandList() {
      let res = await getAllProductBrand();
      res.data.forEach(el => {
        el.sort = this.getPingyin(el.productBrandName);
      });
      res.data.sort((a, b) => a.sort.localeCompare(b.sort));
      this.productBrandList = res.data;
      this.productBrandListOrg = res.data;
    },
    brandJumpClick(item) {
      uni.postMessage({ data: `/pages/home/components/goodsList?id=${item.id}` }); //eslint-disable-line
    }
  }
};
</script>
<style lang="less" scoped>
.productList {
  .content {
    padding-top: 8px;
    height: calc(100% - 86px);
    box-sizing: border-box;
    .contentBox {
      height: 100%;
      overflow-y: auto;
      .contentItem {
        width: 100%;
        height: 44px;
        box-sizing: border-box;
        background: white;
      }
    }
  }
}
</style>
